<template>
  <div class="orders-container">
    <van-nav-bar title="我的订单" />
    
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部">
        <order-list :orders="filteredOrders" />
      </van-tab>
      <van-tab title="待付款">
        <order-list :orders="filteredOrders" />
      </van-tab>
      <van-tab title="已完成">
        <order-list :orders="filteredOrders" />
      </van-tab>
    </van-tabs>
    
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/orders">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useOrderStore } from '../stores/order'
import OrderList from '../components/OrderList.vue'

const orderStore = useOrderStore()
const activeTab = ref(0)
const active = ref(1)

const filteredOrders = computed(() => {
  const statusMap = ['', 'pending', 'completed']
  const status = statusMap[activeTab.value]
  return status
    ? orderStore.orders.filter(order => order.status === status)
    : orderStore.orders
})
</script>

<style scoped>
.orders-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}
</style> 